<template>
	<view class="main-container">
		<view class="customer-coupon-item-context">
			<view class="zichan-container">
				<view class="zichan-container__header">
					<text style="margin-right: 20rpx;">{{ detaileInfo.receiverName }}</text>
					<text>({{ detaileInfo.receiverId }})</text>
				</view>
				<view class="zichan-container__bottom">
					<img :src="detaileInfo.usingStatusIcon" class="using-status-imgage" />
					<view class="zichan-container__bottom-item">
						<view class="title">优惠券名称：</view>
						<view>{{ detaileInfo.name }}</view>
					</view>
					<view class="zichan-container__bottom-item">
						<view class="title">优惠券类型：</view>
						<view>{{ detaileInfo.type==0?'定时券':'有效券' }}</view>
					</view>
					<view class="zichan-container__bottom-item">
						<view class="title">优惠券金额：</view>
						<view>
							{{ detaileInfo.amount | formatMoneyChinese }}
							<text>（满{{ detaileInfo.min | formatMoneyChinese }}可以用）</text>
						</view>
					</view>
					<view class="zichan-container__bottom-item">
						<view class="title">有效期：</view>
						<view>{{ detaileInfo.startTime | formatTime }}—{{ detaileInfo.endTime | formatTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-operation-container" v-show="detaileInfo.isUsed == 0">
			<button class="confirm-btn-submit bottom-change-view" :loading="submitUploadStatus" :disabled="submitUploadStatus" @click="sumbitVerificationCoupon">核销优惠券</button>
		</view>
	</view>
</template>

<script>
import couponInfo from '@/packagePages/mine/coupon/components/couponInfo.vue';
import { getCustomerStoreCouponNewInfoById, storeVerificationCoupon } from '@/constant/customer.js';
import { errorToShow, modelShow, successToShow } from '@/config/common.js';
import couponCompleteIcon from '@/static/images/coupon_complete-icon.png';
import couponUnusedIcon from '@/static/images/coupon_unused-icon.png';
export default {
	components: {
		couponInfo
	},
	filters: {
		formatTime: function(value) {
			if (!value) {
				return '';
			}
			return value.replace(new RegExp('-', 'gm'), '.');
		}
	},
	data() {
		return {
			detaileInfo: {
				CustomerInfo: {}
			},
			couponId: '',
			submitUploadStatus: false,
			couponCompleteIcon: couponCompleteIcon,
			couponUnusedIcon: couponUnusedIcon
		};
	},
	onLoad: function(option) {
		this.couponId = option.couponId;
		this.getCustomerStoreCouponNewInfoById(option);
	},

	methods: {
		async getCustomerStoreCouponNewInfoById() {
			if (!this.couponId) {
				errorToShow('获取优惠券标识失败');
				return;
			}
			 let result= await getCustomerStoreCouponNewInfoById(this.couponId);
			 this.detaileInfo=result.data
			if (this.detaileInfo.isUsed == 1) {
				this.detaileInfo.usingStatusIcon = this.couponCompleteIcon;
			} else {
				this.detaileInfo.usingStatusIcon = this.couponUnusedIcon;
			}
		},
		sumbitVerificationCoupon() {
			modelShow('提示', '确定核销该优惠券吗？', this.confirmVerificationCoupon);
		},
		async confirmVerificationCoupon() {
			let customerId=uni.getStorageSync('customerId')
			let postData = {
				id: this.detaileInfo.id,
				writeOffId: customerId
			};
			this.submitUploadStatus = true;
			 storeVerificationCoupon(postData).then(res=>{
				this.submitUploadStatus = false;
				if(res.code==0){
					successToShow('核销成功', function() {
						uni.navigateBack();
					});
				}else{
					errorToShow(res.msg)
				}
				
			})
		}
	}
};
</script>

<style scoped lang="scss">
.main-container {
	background-color: $main-page-color;
	height: 100vh;
}

.customer-coupon-item-context {
	padding: 20rpx 30rpx 0 30rpx;
}

.zichan-container {
	background-color: #fff;
	font-size: $main-text-size-28;
	border-radius: 16rpx;
	padding: 0 30rpx;
	&__header {
		display: flex;
		align-items: center;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	&__bottom {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		position: relative;
		.using-status-imgage {
			width: 120rpx;
			height: 96rpx;
			position: absolute;
			top: 60rpx;
			right: 0rpx;
		}
	}
}

.zichan-container__bottom-item {
	display: flex;
	margin-bottom: 14rpx;

	.title {
		color: $main-text-color-gray-black;
	}
}

.zichan-container__bottom-item:first-child {
	width: 450rpx;
}

.customer-coupon-item {
	&-context {
		color: $main-text-color-gray-33;

		.line {
			height: 2rpx;
			width: 100%;
			background-color: $main-line-color-grid;
		}

		.top {
			width: 100%;
			margin-bottom: 12rpx;
			background-color: #ffffff;
		}
	}
}

.customer-container {
	padding: 12rpx;

	.info-top {
		display: flex;
		justify-content: space-between;
	}
}
.bottom-operation-container {
	display: flex;
	height: 120rpx;
	line-height: 120rpx;
	width: 100%;
	align-items: center;
	justify-content: space-around;
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
}
.confirm-btn-submit {
	
	background-color: #fff;
	font-size: 30rpx;
	color: #FFFFFF;
	width: 90vw;
	// left:5vw;
	line-height: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: unset;
	border-radius: 80px;
}
</style>
